<template>
<el-dialog title="设置路线" :visible="dialogVisible" @close="close" class="dialog" height="80vh" append-to-body width="60%">
    <el-button @click="addTab(editableTabsValue)" style="margin-bottom: 10px;">新增 +</el-button>
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
            v-for="item in editableTabs" 
            :key="item.name"
            :label="item.title"
            :name="item.name"
        >
        <el-card class="box-card" v-for="(pt, i) in item.items" :key="`${i}-items`">
            <el-descriptions class="margin-top" :title="`${i + 1}.${pt.title || ''}`" :column="3" border>
                <template slot="extra">
                    <!-- <el-button type="primary" size="small">编辑</el-button> -->
                    <el-button type="danger" size="small" @click="handleDeleteItem(item.items, i)">删除</el-button>
                </template>
                <el-descriptions-item>
                <template slot="label">
                    标题
                </template>
                <el-input v-model="pt.title" />
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    内容
                </template>
                <el-input v-model="pt.content" />
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    站点介绍
                </template>
                <el-input v-model="pt.intro" />
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    站点地址
                </template>
                <el-input v-model="pt.address" />
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    步行时间
                </template>
                <el-input v-model="pt.step" />
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    预计游玩时间
                </template>
                <el-input v-model="pt.time" />
                </el-descriptions-item>
                <el-descriptions-item :span="2">
                <template slot="label">
                    推荐交通方式
                </template>
                <el-input v-model="pt.traffic" />
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    是否关闭
                </template>
                <el-switch v-model="pt.closed">
                </el-switch>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-button @click="addItem(item.items)" class="item-add">+</el-button>
        </el-tab-pane>
    </el-tabs>
  <div slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</el-dialog>
</template>
<script>
import {travelStrategyApi} from '@/feature/mj/infra/api/travelStrategyApi'
export default {
    props: { 
        dialogVisible: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: () => {
                return {
                    strategyId: 163
                }
            }
        }
    },
    data() {
        return {
            editableTabsValue: '1',
            editableTabs: [],
            oldStrategyLines: []
        }
    },
    watch: {
        dialogVisible(val) {
            if (val) {
                this.oldStrategyLines = []
                travelStrategyApi.detail(this.info.id).then(res => {
                    this.oldStrategyLines = JSON.parse(JSON.stringify(res?.strategyLines || []))
                    this.editableTabs = res?.strategyLines?.sort((a,b) => a.day - b.day)?.map((v,i) => ({
                        ...v,
                        name: String(i + 1),
                        title: 'Day'+ String(v.day),
                    })) || []
                    console.log('editableTabs', this.editableTabs)
                })
            }
        }
    },
    methods: {
        close() {
            this.editableTabsValue = '1'
            this.$emit('update:dialogVisible', false);
        },
        addItem(arr) {
            arr.push({ closed: false })
        },
        handleDeleteItem(arr, i) {
            arr.splice(i, 1)
        },
        addTab() {
        const length = this.editableTabs.length + 1;
        this.editableTabs.push({
          title: 'Day ' + length, 
          name: String(length),
          items: [{}]
        });
        this.editableTabsValue = String(length);
      },
      removeTab(targetName) {
        if (!targetName) return;
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName).map((v, i) => {
          return {
           ...v,
            name: String(i + 1),
            title: 'Day ' + (i + 1), 
          }
        })
      },
      handleSave() {
        const strategyLines = this.editableTabs.map((v) => {
            const day = Number(v.name)
          return {
            day: day,
            id: v.id,
            strategyId: this.info.id,
            items: v.items.map((c, j) => ({
                ...c,
                strategyId: this.info.id,
                day: day,
                dayId: v.id
            }))
          }
        })
        this.close()
        this.$emit('save', strategyLines, this.oldStrategyLines)
        console.log('editableTabs', strategyLines)
      }
    }
}
</script>

<style scoped>
    .dialog{
        text-align: left;
    }
    .box-card{
        margin-top: 10px;
    }
    .item-add{
        width: 100%;
        margin-top: 10px;
    }
</style>